<template>
	<view class="flex_c content" style="background: #000;">
		<view :style="{height:$store.state.StatusBar.statusBar + 'px'}">
		</view>
		<view class="page"></view>
		<view class="flex_r fj_b z_index2 top" style="align-items: center;justify-content: center; ">
			<view class="flex_r fa_c nav" style="">
				<view class="flex_c_c nav-item" v-for="(item,index) in tabList" :key="index"
					@click="switchTabbarPage(index)">
					<view v-if="currentIndex == index" class="text_34 nav-item-title"
						style="color: #F3D85D; font-size: 36rpx;">
						{{item.title}}
					</view>
					<view class="" v-else class="text_34 nav-item-title" style="color: #fff;">
						{{item.title}}
					</view>
					<view class="nav-itemimg" style="width: 66rpx; margin-top: 10rpx;"
						:class="{nav_itemimg:currentIndex !== index}">
						<view class="" style="width: 100%; height: 4rpx; background-color: #F3D85D;">
						</view>
					</view>
				</view>
			</view>
			<view class="icon_">
			</view>
		</view>

		<scroll-view class="flex1 custom-page" refresher-background="rgba(153, 153, 153, 0)" scroll-y refresher-enabled
			:refresher-triggered="refresherTriggered" @refresherrefresh="refresherrefresh">
			<view class="" style="flex-wrap: wrap; display: flex; justify-content: space-between; padding: 20rpx;">

				<view class="z_index2 row"
					style="width: 47%; margin-bottom: 20rpx; border-radius: 12rpx; overflow:hidden;"
					v-for="(item,index) in userList" :key="index">
					<view class=" item" :style="'background-image: url('+ item.usericon +');'"
						style="border-radius: 12rpx 12rpx 0 0; background-size: 100% 100%;" @click="goUser(item)">
						<!-- 			<view class="" style="display: flex; justify-content: flex-end;">
							<image style="width: 100rpx; height: 40rpx;" src="./img/ic_zhenren.png" mode=""></image>
						</view> -->
						<view class="" style="height: 300rpx;">

						</view>
						<view class="" style="display: flex; align-items: center; justify-content: space-between;">
							<view class="text_32" style="color: #fff; font-weight: 600; margin-right: 20rpx;">
								{{item.usernick}}
							</view>
							<!-- @click.stop="goMsg(item)" -->
							<!-- <image style="width: 100rpx; height: 100rpx; border-radius: 50%;" src="./img/ic_home_dazhaohu.png" mode="aspectFill"></image> -->
							<!-- 		<view class="voice-icon">
								<text v-if="item.status==2">在线</text>
								<text v-else>隐身</text>
							</view> -->
						</view>
						<!-- 	<view>
							<image></image>
						</view> -->
					</view>

					<view class="" @click="goUser(item)"
						style="background-color: #26252B; border-radius: 0 0 12rpx 12rpx; color: #fff; font-size: 24rpx;">
						<view class="" style="display: flex; color: #fff; padding: 10rpx 20rpx; ">
							<template v-if="item.address">
								<text style="margin-right: 20rpx;">{{item.address}}</text>
								<view class="infor-str"></view>
							</template>
							<text style="margin-right: 20rpx;">{{item.age}}岁</text>
							<template v-if="item.shengao">
								<view class="infor-str"></view>
								<text>{{item.shengao}}</text>
							</template>
						</view>
						<view class="" style=" color: #fff; padding: 0rpx 20rpx; ">
							<template v-if="item.zhiyename">
								<view class="infor-str"></view>
								<text>{{item.zhiyename}}</text>
							</template>
						</view>
						<!-- 		<view class=""  style=" color: #fff; padding: 10rpx 20rpx; ">
							<view class="icon_ voice" @click.stop="onAudio(item)" v-if="item.voiceSignature">
								<view class="voice-icon">
									<image class="img" src="./img/ic_voice_record_listen.png" mode="aspectFill">
									</image>
								</view>
								<view class="flex1 icon_ voice-img">
									<image class="img" src="./img/gif_voice_play.gif" mode="aspectFill"
										v-if="item.userid == video.userid && video.status == true">
									</image>
									<image style="width: 90%;height: 70%;" src="./img/ic_home_voice_start.png"
										mode="aspectFill" v-else></image>
								</view>
								<view class="size_white text_24 voice-value">
									{{item.voiceSignatureSeconds}}
								</view>
							</view>
						</view> -->

					</view>

					<!-- <m-line color="#B8B8B8" length="100%" :hairline="true"></m-line> -->
				</view>
			</view>
		</scroll-view>

		<uni-popup ref="popup" type="center">
			<view class="flex_c_c popup">
				<view class="popup-title">
					今日缘分
					<view class="popup-title-img" @click="close">
						<image class="img" src="./img/ic_close_gray.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="text_22 color_">
					茫茫人海，珍惜这一秒的缘分
				</view>
				<view class="flex_c flex1 popup-content">
					<!-- :current="currentIndex" @change="change" -->
					<swiper class="flex1 page-current" indicator-dots indicator-color="#666"
						indicator-active-color="#fff">
						<swiper-item class="swiper-item" v-for="i in 3">
							<view class="flex_r fj_b list">
								<view class="flex_c fa_c item" v-for="(im,ix) in userList2"
									v-if="(i == 1 && ix <6) || (i==2 && ix >=6 && ix <12) ||  (i==3 && ix >=12 )">
									<view class="selected">
										<image class="img" src="./img/check_box_selected.png" mode="aspectFill"></image>
										<!-- <image class="img" src="./img/check_box_unselected.png" mode="aspectFill"></image> -->
									</view>
									<view class="z_index2 item-img">
										<image class="img" mode="aspectFill" :src="im.pic"></image>
									</view>
									<view class="text_22">
										{{im.usernick}}
									</view>
								</view>
								<view style="width: 100%;height: 8%;">
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="size_white popup-button">
					一键邀请
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="pay" type="center" :mask-click="false">
			<m-pay :money="pay.price" :projectId="pay.id" :type="3"></m-pay>
		</uni-popup>
	</view>

</template>
<script>
	import Mpay from '@/components/m-pay/m-pay.vue';
	export default {
		components: {
			Mpay
		},
		data() {
			return {
				pay: {},
				video: {
					innerAudioContext: {},
					status: false,
					userid: 0
				},
				pageno: 1,
				refresherTriggered: true,
				type: 0,
				tabList: [{
						title: '同城'
					},
					{
						title: '活跃'
					}
					// {
					// 	title: '在线'
					// }
				],
				userList: [],
				userList2: [],
				// tabbar当前被选中的序号
				currentIndex: 0,
				longitude: 0,
				latitude: 0
			}
		},
		onHide() {
			this.video.innerAudioContext.destroy();
			console.log("onHide")
		},
		// mounted() {
		onShow() {
			setTimeout(()=>{
				this.isPay();
			}, 1000);
			// uni.getLocation({
			// 	type: 'wgs84',
			// 	success: function(res) {
			// 		console.log('当前位置的经度：' + res.longitude);
			// 		console.log('当前位置的纬度：' + res.latitude);
			// 		this.longitude = res.longitude
			// 		this.latitude = res.latitude
			// 	}
			// });
			uni.setTabBarStyle({
				selectedColor: '#fff',
				backgroundColor: '#0C0807',
				// backgroundImage: 'linear-gradient(to top, #aaa, #66ff00)'
			})
			// console.log(this.userList.length , this.userList2.length)
			// if(this.userList.length >0 && this.userList2.length > 0){
			// 	return;
			// }
			setTimeout(() => {
				// this.open()
			}, 100)
			// this.getList()
			// this.refresherrefresh()
			this.pageno = 1;
			this.userList = [];
			this.getList()
			this.video.innerAudioContext = uni.createInnerAudioContext();
			this.video.innerAudioContext.onPlay(() => {
				// this.video.userid = item.userid
				this.video.status = true;
				console.log('开始播放');
			});
			this.video.innerAudioContext.onError((res) => {
				uni.showToast({
					title: "播放失败",
					icon: "none"
				})
				console.log(res.errMsg);
				console.log(res.errCode);
			});
			this.video.innerAudioContext.onEnded((res) => {
				this.video.userid = 0;
				this.video.status = false;
				console.log('播放结束');
			});
		},
		onReachBottom() {
			this.getList()
		},
		methods: {
			onAudio(item) {
				if (this.video.userid != 0 && this.video.status != false && this.video.userid == item.userid) {
					if (this.video.status) {
						//暂停
						this.video.innerAudioContext.stop();
						this.video.status = false;
					} else {
						//播放
						this.video.innerAudioContext.play();
						this.video.status = true;
					}
				} else {
					this.video.userid = item.userid
					this.video.innerAudioContext.src = item.voiceSignature;
					this.video.innerAudioContext.autoplay = true;
				}

			},
			goUser(item) {
				uni.navigateTo({
					url: `/pages/m-pages/m-user-info/index?userid=` + item.userid
				})
			},
			goSearch() {
				uni.navigateTo({
					url: `/im/conversation/create-conversation/create`
				})
			},
			goMsg(item) {
				uni.navigateTo({
					url: `/im/chat/chat?userid=` + item.userid + `&conversationID=C2C` + item.texcode,
				});
			},
			refresherrefresh() {
				// uni.showToast({
				// 	title: '下拉',
				// 	duration: 1000
				// });
				this.pageno = 1;
				this.userList = [];
				this.getList()
				this.refresherTriggered = true
			},
			async getList() {
				// {pageno:1,gender:1}
				let url = "";
				if (this.currentIndex == 0) {
					url = '/appfujinren/recommentList?pageno=' + this.pageno + '&gender=1';
				}
				if (this.currentIndex == 1) {
					url = '/appfujinren/list?pageno=' + this.pageno + '&longitude=' + this.longitude + '&latitude=' +
						this.latitude;
				}
				if (this.currentIndex == 2) {
					let sex = this.type ? 2 : 1;
					url = '/appfujinren/searchList?pageno=' + this.pageno + "&sex=" + sex;
				}
				let res = await this.$c.post(url)
				if (res.code == 1002) {
					uni.navigateTo({
						url: '/im/login/login'
					});
				}
				this.userList = this.userList.concat(res.data)
				this.pageno++;
				this.refresherTriggered = false
			},
			async open() {
				uni.setStorage({
					key: 'home_open',
					data: 0,
				});
				let value = uni.getStorageSync('home_open');
				console.log(value < (Date.now() + (3600 * 24000)), value, (Date.now() + (3600 * 24000)))
				if (value != 0 && value != '' && value > (Date.now() + (3600 * 24000))) {
					return;
				}
				uni.setStorage({
					key: 'home_open',
					data: Date.now(),
				});
				let res = await this.$c.post('/app/user/getRandomUserList')
				this.userList2 = res.data
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open()
				// console.log(this.$refs.popup)
			},
			close() {
				this.$refs.popup.close()
			},
			changeType() {
				this.type = !this.type
				this.switchTabbarPage(2)
			},
			switchTabbarPage(index) {
				this.currentIndex = index
				this.pageno = 1;
				this.userList = [];
				this.getList()
			},
			async isPay() {
				let userInfo = uni.getStorageSync('userInfo');
				let vipManage = uni.getStorageSync('vipManage');
				console.log("vipManage："+JSON.stringify(vipManage));
				if(userInfo && userInfo.token && 1 == vipManage){
					let res = await this.$c.post("/app/tickUserInfo/info");
					console.log("门票："+JSON.stringify(res));
					if (res.code == 0) {
						if (res.data.windowTicket == 2) {
							this.pay.price = uni.getStorageSync("ticketPrice");
							uni.hideTabBar();
							this.$refs.pay.open("bottom");
						}else{
							uni.showTabBar();
							this.$refs.pay.close();
						}
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100vw;
		height: 100vh;
	}

	.custom-page {
		width: 100%;
		height: 0;
		background-color: #999;
	}

	.custom-page-title {
		box-sizing: border-box;
		position: absolute;
		padding: 0 20rpx;
		top: 0;
		left: 0;
		right: 0;
		z-index: 2;
		width: 100%;
		height: 100rpx;
		background-color: #e3ecfb;
	}

	.popup {
		width: 620rpx;
		height: 750rpx;
		box-sizing: border-box;
		padding: 30rpx 0rpx;
		border-radius: 20rpx;
		background-color: #fff;
		background-image: linear-gradient(to top, #e0dbff, #fff);
		background: #282828;

		.popup-title {
			width: 100%;
			position: relative;
			color: #ff4d79;
			text-align: center;
			height: 60rpx;

			.popup-title-img {
				position: absolute;
				z-index: 2;
				right: 30rpx;
				top: -10rpx;
				width: 30rpx;
				height: 30rpx;
			}
		}

		.popup-content {
			width: 100%;
			margin-top: 10rpx;

			.page-current {
				height: 0;
				width: 100%;

				.list {
					box-sizing: border-box;
					padding: 0 10rpx;
					width: 100%;
					height: 100%;
					flex-wrap: wrap;

					.item {
						position: relative;
						width: calc(33.33% - 6rpx);
						height: 46%;

						.selected {
							position: absolute;
							top: 4rpx;
							right: 4rpx;
							width: 44rpx;
							height: 44rpx;
							z-index: 9;
						}

						.item-img {
							width: 100%;
							height: 220rpx;
							border-radius: 20rpx;
							overflow: hidden;

							// background-color: #999;
							image {
								width: 220rpx;
								height: 220rpx;
							}
						}

					}

				}

			}
		}

		.popup-button {
			width: 450rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			border-radius: 40rpx;
			background-color: #f82f6b;
		}
	}

	.page {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(#e3ecfb, #fdedf0, #fff, #fff);
		background: #000;
		color: #fff;
	}

	.top {
		width: calc(100% - 60rpx);
		height: 100rpx;
		margin: 0 auto;

		.nav {
			width: 400rpx;
			height: 90rpx;
			margin-top: 10rpx;

			.nav-item {
				width: 130rpx;
				height: 100%;

				.nav-item-title {
					height: 50rpx;
				}

				.nav-itemimg {
					position: relative;
					top: -10rpx;
					width: 50rpx;
					height: 30rpx;
					transition: all .3s;
					opacity: 1;
				}

				.nav_itemimg {
					opacity: 0;
					transition: all .3s;
				}
			}
		}

		.top-button {
			width: 160rpx;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			border-radius: 32rpx;
			color: #f82f6b;
			border: 1px solid #f82f6b;
		}

		.nav-icon {
			width: 50rpx;
			height: 50rpx;
			margin-left: 20rpx;
		}
	}


	.row {
		.item {
			box-sizing: border-box;
			padding: 10rpx 20rpx;
			width: 100%;

			.item-img {
				width: 150rpx;
				height: 150rpx;
				border-radius: 20rpx;
				overflow: hidden;
				margin-right: 20rpx;
				background-color: #999;

				image {
					width: 150rpx;
					height: 150rpx;
				}
			}

			.item-r {
				.item-name {
					.item-name-label {
						width: 100rpx;
						height: 40rpx;
						margin-left: 20rpx;
						border-radius: 20rpx;
					}
				}

				.infor {
					width: 100%;
					height: 50rpx;

					.infor-str {
						width: 1px;
						height: 30rpx;
						margin: 0 10rpx;
						background-color: #999;
					}
				}

				.voice {
					box-sizing: border-box;
					padding: 0 8rpx 0 0;
					width: 250rpx;
					height: 50rpx;
					border-radius: 25rpx;
					background-color: #ff0f6f;

					.voice-icon {
						width: 50rpx;
						height: 50rpx;
						overflow: hidden;
						border-radius: 50%;
					}

					.voice-img {
						height: 100%;
						margin: 0 10rpx;
					}

					.voice-value {
						box-sizing: border-box;
					}
				}



				.item-r-icon {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
					background-color: #fff;
				}

			}
		}

	}

	.voice {
		box-sizing: border-box;
		padding: 0 8rpx 0 0;
		width: 250rpx;
		height: 50rpx;
		border-radius: 25rpx;
		background-color: #ff0f6f;

		.voice-icon {
			width: 50rpx;
			height: 50rpx;
			overflow: hidden;
			border-radius: 50%;
		}

		.voice-img {
			height: 100%;
			margin: 0 10rpx;
		}

		.voice-value {
			box-sizing: border-box;
		}
	}
</style>